HeatColor UDF (based on jQuery library)

When displaying values in a table, I like to use color to visually indicate whether the number is high or low. When displaying data on a webpage, it was trivial for us to use the jquery-heatcolor library to dynamically add color on-the-fly. This is an older library and the project's webpage disappeared and only the JS scripts were migrated to Github. I reported the lack of demo/documentation back in 2020 and finally scraped it from Archive.org, cleaned it up and shared it as a GIST.

When generating a PDF, a non-JS approach is required so I converted the JS library to a ColdFusion UDF (back in the mid-2000's) and am just now finally sharing it hopes that it will benefit others. Enjoy!

Source Code:

https://gist.github.com/JamoCA/3220867aaa5e56917221c07d0dadfdd4

Comments

[Pawel Czarnota]

Thanks for resurrecting this, James and sharing. Sounds like it could be useful. I looked at the example code with axe DevTools, the colors chosen for some cells have some minimum contrast accessibility issue between background and foreground, but that could be easily fixed.

[James Moberg]

On websites, I've used a JS library that auto-adjusts the contrast or delegate this effect to a short dedicated cell for visualization purposes.

CFML-wise, I've used the "colorContrast" UDF below when JS isn't available, but it only returns white or black HEX codes based on a HEX color argument.

public string function colorContrast(string color="") output=false hint="Returns black or white hex color based on passed color" {
    if (len(trim(arguments.color)) neq 6) return '000000';
    local.intRed = inputbasen(mid(arguments.color, 1, 1 ), 16);
    local.intGreen = inputbasen(mid(arguments.color, 3, 1 ),16);
    local.intBlue = inputbasen(mid(arguments.color, 5, 1 ),16);
    if ((local.intGreen gt 9) or ((local.intRed + local.intGreen + local.intBlue) gt 30)) {
        return "000000";
    }else {
        return "ffffff";
    }
}

If you want the text to "pop", another option would be to use CSS text-shadow to add a slight shadow or glow so that the text is better contrasted against a blackened silhouette.